<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子礼金SaaS系统 - 演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen">
    <!-- 顶部导航 -->
    <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-lg">
        <div class="max-w-7xl mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <h1 class="text-2xl font-bold text-gray-800">电子礼金SaaS系统</h1>
                <div class="flex space-x-4">
                    <a href="/" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
                        H5应用
                    </a>
                    <a href="/admin.html" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-200">
                        管理后台
                    </a>
                    <a href="/screen.html" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-200">
                        互动大屏
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="max-w-7xl mx-auto px-4 py-12">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
            <h1 class="text-5xl font-bold text-white mb-6 floating">电子礼金SaaS系统</h1>
            <p class="text-xl text-white text-opacity-90 mb-8">完整的礼金管理解决方案，包含H5应用、管理后台和互动大屏</p>
            <div class="flex justify-center space-x-4">
                <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <div class="text-2xl font-bold text-white">3</div>
                    <div class="text-white text-opacity-80">核心模块</div>
                </div>
                <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <div class="text-2xl font-bold text-white">4</div>
                    <div class="text-white text-opacity-80">变现模式</div>
                </div>
                <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg px-6 py-3">
                    <div class="text-2xl font-bold text-white">100%</div>
                    <div class="text-white text-opacity-80">本地部署</div>
                </div>
            </div>
        </div>

        <!-- 功能模块展示 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <!-- H5应用 -->
            <div class="bg-white rounded-2xl p-8 card-hover">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-2">H5礼金应用</h3>
                    <p class="text-gray-600">用户端礼金记录与管理</p>
                </div>
                
                <div class="space-y-3 mb-6">
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
                        用户注册与登录
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
                        活动创建与管理
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
                        礼金录入与统计
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
                        实时数据同步
                    </div>
                </div>
                
                <a href="/" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-200 text-center block">
                    体验H5应用
                </a>
            </div>

            <!-- 管理后台 -->
            <div class="bg-white rounded-2xl p-8 card-hover">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-2">SaaS管理后台</h3>
                    <p class="text-gray-600">运营管理与商业化变现</p>
                </div>
                
                <div class="space-y-3 mb-6">
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                        统一仪表盘
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                        打印服务管理
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                        设备租赁管理
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                        推广佣金体系
                    </div>
                </div>
                
                <a href="/admin.html" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition duration-200 text-center block">
                    进入管理后台
                </a>
            </div>

            <!-- 互动大屏 -->
            <div class="bg-white rounded-2xl p-8 card-hover">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-2">互动大屏系统</h3>
                    <p class="text-gray-600">现场互动与氛围营造</p>
                </div>
                
                <div class="space-y-3 mb-6">
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
                        实时数据展示
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
                        礼金排行榜
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
                        祝福墙互动
                    </div>
                        <div class="flex items-center text-sm text-gray-600">
                            <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
                            多媒体播放
                        </div>
                        <div class="flex items-center text-sm text-gray-600">
                            <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
                            抽奖系统
                        </div>
                </div>
                
                <a href="/screen.html" class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition duration-200 text-center block">
                    查看互动大屏
                </a>
            </div>
        </div>

        <!-- 商业模式 -->
        <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-2xl p-8 mb-16">
            <h2 class="text-3xl font-bold text-gray-800 text-center mb-8">商业模式与变现点</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">打印服务</h3>
                    <p class="text-sm text-gray-600">按次收费，利润来自打印差价与物流溢价</p>
                </div>
                
                <div class="text-center">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">大屏功能</h3>
                    <p class="text-sm text-gray-600">按场次或按时间订阅收费，不同功能套餐不同价格</p>
                </div>
                
                <div class="text-center">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">设备租赁</h3>
                    <p class="text-sm text-gray-600">按天收费，高客单价，结合技术服务获得额外收入</p>
                </div>
                
                <div class="text-center">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">推广佣金</h3>
                    <p class="text-sm text-gray-600">为增长支付的费用，通过分润激励用户裂变</p>
                </div>
            </div>
        </div>

        <!-- 技术特点 -->
        <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-2xl p-8">
            <h2 class="text-3xl font-bold text-gray-800 text-center mb-8">技术特点</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="text-center">
                    <div class="text-4xl mb-4">⚡</div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">轻量级</h3>
                    <p class="text-sm text-gray-600">使用最少的依赖，快速部署</p>
                </div>
                
                <div class="text-center">
                    <div class="text-4xl mb-4">🔄</div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">实时性</h3>
                    <p class="text-sm text-gray-600">Socket.io实现实时数据同步</p>
                </div>
                
                <div class="text-center">
                    <div class="text-4xl mb-4">📱</div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">响应式</h3>
                    <p class="text-sm text-gray-600">支持各种设备尺寸</p>
                </div>
                
                <div class="text-center">
                    <div class="text-4xl mb-4">🔒</div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">安全性</h3>
                    <p class="text-sm text-gray-600">JWT认证，数据加密存储</p>
                </div>
                
                <div class="text-center">
                    <div class="text-4xl mb-4">🔧</div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">可扩展</h3>
                    <p class="text-sm text-gray-600">模块化设计，易于扩展</p>
                </div>
                
                <div class="text-center">
                    <div class="text-4xl mb-4">💾</div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">本地部署</h3>
                    <p class="text-sm text-gray-600">SQLite数据库，无需外部依赖</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="bg-white bg-opacity-90 backdrop-blur-sm py-8">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-gray-600">© 2024 电子礼金SaaS系统. 基于MIT许可证开源.</p>
            <p class="text-sm text-gray-500 mt-2">技术栈: Node.js + Express + SQLite + Socket.io + Tailwind CSS</p>
        </div>
    </footer>
</body>
</html>
